<template>
    <div class="el-header">
        <img class="logo" src="../../assets/logo.png" alt="">
        <span>{{systemName}}</span>
    </div>
</template>
    
<script>
import { computed, ref, watch } from 'vue';
import {useStore} from 'vuex'
import { title } from '@/settings';
export default {
    name: 'LogoName',
    setup() {
        const systemName = ref(title)
        const store = useStore()
        const isCollapse = computed(()=>store.getters.getIsCollapse)

        watch(()=> isCollapse.value, (val)=>{
            if(!isCollapse.value){
                setTimeout(()=>{
                    if(!isCollapse.value){
                        systemName.value = title
                    }
                }, 200)
            }else{
                systemName.value = ''
            }
        }, {
            immediate: true
        })
        return {
            systemName,
            isCollapse
        }
    }
};
</script>
<style scoped>
.el-header{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
}
.logo{
    width: 30px;
    height: 30px;
}
</style>